<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {% include 'userInfo/base1.html' %}
    <title>注册</title>
</head>
<body>
        <div id="outer">
        <form action=""  method="post" enctype="multipart/form-data">
            {% csrf_token %}
                <div class="form-group col-xs-10">
                    <label for="exampleInputEmail1">{{ regform.uname.label }}</label>
                    {{ regform.uname }}{% if regform.errors.uname.0 != None %}<span class="glyphicon glyphicon-remove-circle bg-danger" style="color:red;">{{ regform.errors.uname.0 }}</span>{% endif %}
                </div>
                <div class="form-group col-xs-10">
                    <label for="exampleInputEmail1">{{ regform.upwd.label }}</label>
                    {{ regform.upwd }}{% if regform.errors.upwd.0 != None %}<span class="glyphicon glyphicon-remove-circle text-danger" style="color:red;">{{ regform.errors.upwd.0 }}</span>{% endif %}
                </div>
                <div class="form-group col-xs-10">
                    <label for="exampleInputEmail1">{{ regform.ulev.label }}</label>
                    {{ regform.ulev }}{% if regform.errors.ulev.0 != None %}<span class="glyphicon glyphicon-remove-circle text-danger" style="color:red;">{{ regform.errors.ulev.0 }}</span>{% endif %}
                </div>
                <div class="form-group col-xs-10">
                    <label for="exampleInputEmail1">{{ regform.utel.label }}</label>
                    {{ regform.utel }}{% if regform.errors.utel.0 != None %}<span class="glyphicon glyphicon-remove-circle text-danger" style="color:red;">{{ regform.errors.utel.0 }}</span>{% endif %}
                </div>
                <div class="form-group col-xs-10">
                    <label for="exampleInputEmail1">{{ regform.uaddr.label }}</label>
                    {{ regform.uaddr }}{% if regform.errors.uaddr.0 != None %}<span class="glyphicon glyphicon-remove-circle text-danger" style="color:red;">{{ regform.errors.uaddr.0 }}</span>{% endif %}
                </div>
                <div class="form-group col-xs-10">
                    <label for="exampleInputEmail1">{{ regform.uimg.label }}</label>
                    <input type="file" name="uimg" required="" id="id_uimg" onchange="uploadFile();">{% if regform.errors.uimg.0 != None %}<span class="glyphicon glyphicon-remove-circle text-danger" style="color:red;">{{ regform.errors.uimg.0 }}</span>{% endif %}
                    <p class="help-block">Example block-level help text here.</p>
                    <p><img src="" style="display:none;border: 1px solid black;" alt="上传图片" id="uploadimg" class="img-thumbnail" width="80" height="80"></p>
                </div>
                <td colspan="2" align="center"><input type="submit" value=" 注册 " class="btn btn-success"><button class="btn btn-info" onclick="goLogin();return false;"> 返回 </button>
        </form>

        </div>
    </table>
        <style>
            .col-xs-10{
                float: none;
            }
            #outer{
                margin: 0 auto;
                width: 35%;

            }
            .btn{
                width: 60px;
                height: 35px;
                margin-left: 16%;
            }
            .glyphicon {
                position: relative;
                top: 2px;
                display: inline-block;
                font-style: italic;
                font-weight: normal;
                line-height: 1;
                -webkit-font-smoothing: antialiased;
            }
        </style>
    <script>
        function uploadFile() {
            var data = new FormData()
            var file = document.getElementById('id_uimg').files[0]
            console.log(file)

            data.append('file',file)
            $.ajax({
                url: '/userinfo/register/ajax1_getImgUrl/',
                type: 'post',
                data: data,
                dataType: 'json',
                success: function (arg) {
                    console.log(arg)
                    $('#uploadimg').prop('src',arg)
                    $('#uploadimg').css('display','inline-block')

                },
                processData:false,      //组织jquery过多的处理FormData数据
                contentType:false
            })
        }
        
        function goLogin() {
            window.location.href = '/userinfo/login/'
        }
    </script>
</body>
</html>